iT邦幫忙

2021 iThome 鐵人賽

DAY 2
0
自我挑戰組

TypeScript 能手養成之旅系列 第 6

TypeScript 能手養成之旅 Day 6 物件型別-基礎物件型別

  • 分享至 

  • xImage
  •  

前言

今天要來介紹物件型別裡面的基礎物件,或許會想說那除了基礎物件型別以外,不是還有 TypeScript 擴充的型別 EnumTuple 和 函式型別 ? 是的,沒錯!在後面會一一介紹,每天進步一點點。

基礎物件型別推論

當我們定義一個 JSON 格式的 object 時,並沒有賦予型別,這時候 TypeScript 會做什麼事呢?

一開始我以為只會告訴我們,這個變數只是個 object 吧!結果很貼心的事發生了,他幫我們做型別推論,並且告訴我們這個變數是什麼型別,裡面的屬性又是為何種型別,例如: name 屬性是 stringage 屬性是 number 等等。

咦!那 nullundefined 呢? 會不會有讓人擔心的結果呢?

結果發現 Nullable Type 被推論對應的型別,而不是 any ,真的是鬆了一口氣。

接下來,我們要來一連串的以不同形式來進行覆寫。

狀況一:物件被不同格式覆寫

如果物件裡的屬性被賦予不同型別的值或缺少屬性都會噴錯。

let testPackage = {
  name: 'CY',
  age: 28,
  job: 'developer'
}

覆寫不同型別的值

當我試著更改 age 的值,由 number 改為 string,TypeScript 馬上就阻止我這麼做了。

testPackage = {
  name: 'CY',
  age: '28',
  job: 'developer',
}

缺少某個屬性

少了某個屬性,會被 TypeScript 提醒要補上。

testPackage = {
  name: 'CY',
  age: 28,
}

多某個屬性

多了某個屬性,看來也是不行的!

testPackage = {
  name: 'CY',
  age: 28,
  job: 'developer',
  quote: 'try'
}

狀況二:值被覆寫不同的型別的值

型別錯誤,導致噴錯。

let testPackage = {
  name: 'CY',
  age: 28,
  job: 'developer'
}
testPackage.age = 18 // 同樣型別,但值不同,是可以的。
testPackage.age = '28' // 更改為字串,噴錯

狀況三:對物件新增屬性或方法

直接新增屬性,會噴錯。

let testPackage = {
  name: 'CY',
  age: 28,
  job: 'developer'
}

testPackage.sayHi = () => { return 'hi' } // 直接新增屬性,噴錯

基礎物件型別註記

接下來讓我們加上型別註記(testPackage: object),看比較看看有什麼樣的差異。

一、整個物件進行覆寫

let testPackage: object = {
  name: 'CY',
  age: 28,
  job: 'developer'
}

// 整個覆寫,並新增屬性,完全沒問題。
testPackage = {
  name: 'CY',
  age: 28,
  job: 'developer',
  quote: 'try'
}

// 整個覆寫,並減少屬性,完全沒問題。
testPackage = {
  name: 'CY',
  age: 28,
}

// 整個覆寫,並屬性全改,完全沒問題。
testPackage = {
  test: 'CY',
}

哇!原來加個註記可以改變這麼大喔!從這裡可以發現 TypeScript 是可以接受完整覆寫。

直接對值進行新增修改及覆寫

如果來對值進行新增修改及覆寫,會有什麼樣的情況呢?

let testPackage: object = {
  name: 'CY',
  age: 28,
  job: 'developer'
}

// 修改原屬性的值
testPackage.name = 'Chen'
testPackage.age = '28'
testPackage.job = 'cooker'
// 新增 quote 屬性
testPackage.quote = 'try'

看來會直接噴錯,因此我們可以知道對於型別註記來說,一旦物件型別註記後,是沒有調整的空間的。

結語

從上述的討論,來做一個小結論,TypeScript 型別推論和註記的執行機制,會根據使用者當下的操作行為,來判斷是否要提出錯誤訊息來提醒使用者。

型別推論:

可接受行為

  1. 整個物件完整相根據對應的值做修改覆寫。
  2. 對物件其中屬性相對應的型別,修改值。

不可接受的行為

  1. 複寫物件缺少或新增屬性。
  2. 修改屬性值時沒有給予錯誤的型別。

型別註記

可接受行為

  1. 可以直接覆寫整個物件,並更動裡面的屬性(新增或刪除)。

不可接受行為

  1. 只能接受整個物件進行覆寫,不能直接對物件裡面的屬性進行調整,包括新增及修改。

上一篇
TypeScript 能手養成之旅 Day 5 原始型別
下一篇
TypeScript 能手養成之旅 Day 7 物件型別-函式型別
系列文
TypeScript 能手養成之旅16
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言